<template>
  <el-table-column
    :prop="prop"
    :header-align="headerAlign"
    :align="align"
    :width="width"
    :label="label">
    <template slot-scope="scope">
    <span v-for="dic in dicList" v-if="dic.value===scope.row[prop]">
      {{dic.label}}
    </span>
    </template>
  </el-table-column>
</template>

<script>
  export default {
    props: {
      prop: {
        type: String
      },
      headerAlign: {
        type: String
      },
      align: {
        type: String
      },
      width: {
        type: String
      },
      label: {
        type: String
      },
      dicArray: {
        type: Array,
        default: function () {
          return []
        }
      },
      dicUrl: {
        type: String,
        default: ""
      }
    },
    data(){
      return {
        dicList: []
      }
    },
    mounted: function () {
      if (this.dicArray  && this.dicArray.length > 0) {
        this.dicList = this.dicArray;
      } else {
        this.$http({
          url: this.$http.adornUrl(this.dicUrl),
          method: 'get',
        }).then(({data}) => {
          this.dicList = data
        })
      }
    }
  }
</script>
